<template>
  <div
    class="course_card"
    @click="routeTo(item)"
  >
    <div
      v-if="isShowRecommendTag"
      class="tag"
      :class="{ bg_green: item.type == 1, bg_orange: item.type == 0 }"
    >
      {{ item.type == 0 ? '学校推荐' : '分院推荐' }}
    </div>
    <div class="cardBtn">
      <div class="btnItem" v-if="showRecommend" @click.stop="handleRecommend">推荐</div>
      <div class="btnItem" v-if="showTop" @click="handleTop">置顶</div>
      <div class="btnItem" v-if="showBottom" @click="handleBottom">置底</div>
      <div class="btnItem" v-if="showRemove" @click="handleRemove">移除</div>
    </div>
    <img class="img" :src="item.coursePic" alt=""/>
    <div class="course_name">
      <span v-if="item.courseType == 3">(工学一体)</span>
      <tooltip
        position="top"
        :text="item.courseName"
        :width="item.courseType == 3 ? 'calc(100% - 80px)' : '100%'"
      />
    </div>
    <div class="branch_name">
      <tooltip position="top" :text="item.branchName" width="100%"/>
    </div>
    <div class="card_bottom">
      <div class="teacher_name">{{ item.principalName }}</div>
      <el-popover placement="bottom" trigger="hover">
        <div class="hover_content">
          <div class="hover_left">
            <div class="left_label">基础数据</div>
            <div class="item">
              <div class="label">题目数：</div>
              <div class="value">
                {{ item.topicNum ? item.topicNum.toLocaleString('en-US') : 0 }}
              </div>
            </div>
            <div class="item">
              <div class="label">考核数：</div>
              <div class="value">
                {{ item.examPaperNum ? item.examPaperNum.toLocaleString('en-US') : 0 }}
              </div>
            </div>
            <div class="item">
              <div class="label">练习数：</div>
              <div class="value">
                {{ item.practicePaperNum ? item.practicePaperNum.toLocaleString('en-US') : 0 }}
              </div>
            </div>
          </div>
          <div class="hover_left ml20">
            <div class="left_label">学习数据</div>
            <div class="item">
              <div class="label">点击量：</div>
              <div class="value">
                {{ item.clickNum ? item.clickNum.toLocaleString('en-US') : 0 }}
              </div>
            </div>
            <div class="item">
              <div class="label">在学人数：</div>
              <div class="value">
                {{ item.stuStudyNum ? item.stuStudyNum.toLocaleString('en-US') : 0 }}
              </div>
            </div>
            <div class="item">
              <div class="label">结课人数：</div>
              <div class="value">
                {{ item.finishNum ? item.finishNum.toLocaleString('en-US') : 0 }}
              </div>
            </div>
          </div>
          <div class="hover_left ml20">
            <div class="left_label">考核数据</div>
            <div class="item">
              <div class="label">累计考核人次：</div>
              <div class="value">
                {{ item.examNum ? item.examNum.toLocaleString('en-US') : 0 }}
              </div>
            </div>
            <div class="item">
              <div class="label">生均考核次数：</div>
              <div class="value">
                {{ item.avgExamNum ? item.avgExamNum.toLocaleString('en-US') : 0 }}
              </div>
            </div>
            <div class="item">
              <div class="label">首考通过率：</div>
              <div class="value">
                {{
                  item.firstExamPassingRate
                    ? item.firstExamPassingRate
                    : 0
                }}%
              </div>
            </div>
            <div class="item">
              <div class="label">重考人次：</div>
              <div class="value">
                {{ item.applyNum ? item.applyNum.toLocaleString('en-US') : 0 }}
              </div>
            </div>
            <div class="item">
              <div class="label">生均重考次数：</div>
              <div class="value">
                {{ item.avgApplyNum ? item.avgApplyNum.toLocaleString('en-US') : 0 }}
              </div>
            </div>
          </div>
        </div>
        <div slot="reference" class="learn_num">
          <img
            class="icon_task"
            src="@/assets/images/icon_task.png"
            alt=""
          />
          <div class="value">{{ item.examNum }}</div>
        </div>
      </el-popover>
    </div>
  </div>
</template>

<script>
export default {
  name: 'courseItem',
  props: {
    item: {
      type: Object,
      required: true
    },
    // 是否展示推荐
    showRecommend: {
      type: Boolean,
      default: false
    },
    // 是否展示置底
    showBottom: {
      type: Boolean,
      default: false
    },
    // 是否展示置顶
    showTop: {
      type: Boolean,
      default: false
    },
    // 是否展示移除
    showRemove: {
      type: Boolean,
      default: false
    },
    // 是否路由到详情页
    isRouteTo: {
      type: Boolean,
      default: false
    },
    // 是否显示推荐标签
    isShowRecommendTag: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {}
  },
  methods: {
    routeTo(item) {
      if (!this.isRouteTo) {
        return
      }
      this.$router.push({
        path: '/course/addCourse',
        query: {
          from: 'recommend',
          courseId: item.courseId,
          branchId: item.branchId,
          type: 'detail'
        }
      })
    },
    handleRecommend() {
      this.$emit('recommend')
    },
    handleTop() {
      this.$emit('top')
    },
    handleBottom() {
      this.$emit('bottom')
    },
    handleRemove() {
      this.$emit('remove')
    }
  }
}

</script>
<style scoped lang="scss">
.course_card {
  /* 不拉伸，固定宽度 */
  width: 228px;
  height: 242px;
  background: #ffffff;
  border-radius: 18px;
  border: 1px solid #ebebeb;
  cursor: pointer;

  position: relative;

  .cardBtn {
    position: absolute;
    top: 8px;
    right: 8px;

    .btnItem {
      width: 40px;
      height: 16px;
      background: rgba(255, 255, 255, 0.8);
      border-radius: 9px;
      font-family: PingFangSC, PingFang SC, sans-serif;
      font-weight: 400;
      font-size: 12px;
      color: #050505;
      text-align: center;
      line-height: 16px;
      margin-bottom: 6px;
    }
  }

  .tag {
    position: absolute;
    top: 0;
    left: 0;
    width: 72px;
    height: 21px;
    border-radius: 9px 0 9px 0;
    font-family: PingFangSC, PingFang SC, sans-serif;
    font-weight: 600;
    font-size: 14px;
    color: #ffffff;
    text-align: center;
  }

  .img {
    width: 100%;
    height: 156px;
    background: #24044e;
    border-radius: 9px 9px 0 0;
  }

  .course_name {
    margin-top: 2px;
    padding: 0 0 0 12px;
    box-sizing: border-box;
    line-height: 22px;
    font-family: PingFangSC, PingFang SC, sans-serif;
    font-weight: 600;
    font-size: 17px;
    color: #333333;

    span {
      font-weight: 500;
      font-size: 12px;
      color: #f89a33;
      margin-right: 6px;
    }
  }

  .branch_name {
    padding: 0 12px 0 12px;
    box-sizing: border-box;
    font-family: PingFangSC, PingFang SC, sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #999999;
  }

  .card_bottom {
    line-height: 22px;
    padding: 0 12px 0 12px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .teacher_name {
      font-family: PingFangSC, PingFang SC, sans-serif;
      font-weight: 400;
      font-size: 13px;
      color: #999999;
    }

    .learn_num {
      display: flex;
      align-items: center;

      .icon_task {
        width: 16px;
      }

      .value {
        margin-left: 4px;
        font-family: PingFangSC, PingFang SC, sans-serif;
        font-weight: 400;
        font-size: 13px;
        color: #999999;
      }
    }
  }
}

.bg_orange {
  background: #f89a33;
}

.bg_green {
  background: #11a983;
}

::v-deep .el-popover .el-popper {
  background: #ffffff;
  box-shadow: 0 0 20px 0 rgba(0, 74, 88, 0.1);
  border-radius: 8px !important;
  padding: 12px 16px;
  box-sizing: border-box;
}

.hover_content {
  display: flex;
  padding: 16px;
  box-sizing: border-box;

  .hover_left {
    .left_label {
      font-size: 18px;
      color: #1ab394;
      font-weight: bold;
    }

    .item {
      display: flex;
      align-items: center;
      padding: 6px 12px;
      box-sizing: border-box;

      .label {
        font-family: PingFangSC, PingFang SC, sans-serif;
        font-weight: 400;
        font-size: 14px;
        color: #999999;
      }

      .value {
        font-family: PingFangSC, PingFang SC, sans-serif;
        font-weight: 400;
        font-size: 14px;
        color: #333333;
      }
    }

    .item:first-child {
      margin-top: 0;
    }
  }
}
</style>
